<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Jquery发送AJAX请求</title>

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

<body>
  <div class="container">
    <h2>JQuery 发送AJAX请求</h2>
    <button>GET</button>
    <button>POST</button>
    <button>通用型AJAX</button>
  </div>

  <script>
    $('button').eq(0).click(function () {
      $.get('http://127.0.0.1:8000/JQuery-delay', { a: 100, b: 200 }, function (data) {
        console.log(data);
      }, 'json')
    })

    $('button').eq(1).click(function () {
      $.post('http://127.0.0.1:8000/JQuery-delay', { a: 100, b: 200 }, function (data) {
        console.log(data);
      }, 'json')
    })

    // ajax方法里面放入一个对象作为参数，里面是一些属性
    $('button').eq(2).click(function () {
      $.ajax({
        // 请求类型
        type: 'GET',
        // url
        url: 'http://127.0.0.1:8000/JQuery-delay',
        // 要发送的参数
        data: { a: 100, b: 200 },
        // 响应体结果类型
        dataType: 'json',
        // 执行成功后的回调函数
        success: function (data) {
          console.log(data);
        },
        // 执行失败的回调
        error: function () {
          console.log('执行失败');
        },
        // 超时
        timeout: 2000
      })
    })

  </script>
</body>

</html>
